<template>
  <!-- 测试 -->
  <div id="SCdata" style="height:90vh;width:100%">
  </div>
</template>

<script >
export default{
  data(){
    return{
      
    }
  },
  mounted(){
    this.$echarts.init(document.getElementById("SCdata"))
    let ROOT_PATH;
    $.get(
    ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
    function (_rawData) {
      run(_rawData);
    }
    );
  },
  methonds:{
    run(_rawData) {
  // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
  const countries = [
    'Finland',
    'France',
    'Germany',
    'Iceland',
    'Norway',
    'Poland',
    'Russia',
    'United Kingdom'
  ];
      const datasetWithFilters = [];
      const seriesList = [];
      echarts.util.each(countries, function (country) {
        var datasetId = 'dataset_' + country;
        //1.过滤数据操作
        datasetWithFilters.push({
          id: datasetId,
          //数据来源ID
          fromDatasetId: 'dataset_raw',
          //数据变换
          transform: {
            //过滤
            type: 'filter',
            //配置条件
            config: {
              and: [
                //dimension指定维度，设成这样的值gte大于等于
                { dimension: 'Year', gte: 1950 },
                { dimension: 'Country', '=': country }
              ]
            }
          }
        });
        //生成线条
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: false,
          //折线端点的标签
          name: country,
          endLabel: {
            show: true,
            formatter: function (params) {
              return params.value[3] + ': ' + params.value[0];
            }
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          //设置折线图的高亮状态
          emphasis: {
            focus: 'series'
          },
            //可以定义data 的哪个维度被编码成什么
          encode: {
            //Year数据映射到x轴
            x: 'Year',
            y: 'Income',
            label: ['Country', 'Income'],
            itemName: 'Year',
            tooltip: ['Income']
          }
        });
      });
      //图表配置项设定
      option = {
        animationDuration: 10000,
        //数据源
        dataset: [
          {
            id: 'dataset_raw',
            source: _rawData
          },
          //数据转化操作
          ...datasetWithFilters
        ],
        title: {
          text: 'Income of Germany and France since 1950'
        },
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          name: 'Income'
        },
        grid: {
          right: 140
        },
        series: seriesList
      };
      //添加到图表中
      myChart.setOption(option);
      }
      },
}

</script>

<style scope>

</style>
